<style>
.my-drop-zone { border: dotted 3px lightgray; }
</style>
<div class="jumbotron">
  <h1><span editable-text="film.title" buttons="no" blur="submit" onaftersave="updateFilm()" e-form="filmTitleForm" ng-click="filmTitleForm.$show()">{{film.title}}</span></h1>
  <p class="lead">
    <div class="well my-drop-zone" nv-file-drop="" nv-file-over="" uploader="coverImageUploader">
        <img id="coverImage" class="img-responsive center-block" ng-src="{{coverImageUrl}}" alt="film cover image" >
    </div>
    <p class="text-left">
         <span editable-textarea="film.description" e-rows="10" e-cols="50"  onaftersave="updateFilm()" e-form="filmDescForm" ng-click="filmDescForm.$show()" buttons="no" blur="submit">{{film.description || "empty" }}</span>
    </p>
  </p>
 <p class="text-left" style="position:relative;">
     <span class="label label-default" ng-click="filmStreetDateForm.$show()">{{'Street Date'| atLeast:27}}</span><span editable-text="film.streetDate" buttons="no" blur="submit" e-style="position:absolute; right: 0; top:0;" e-form="filmStreetDateForm" onaftersave="updateFilm()" class="pull-right">{{film.streetDate | date:'longDate'}}</span>
 </p>
 <p class="text-left" style="position:relative;">
     <span class="label label-default" ng-click="filmPerformersForm.$show()">{{'Performers'| atLeast:26}}</span><span editable-text="film.performers" buttons="no" blur="submit" e-style="position:absolute; right: 0; top:0;" e-form="filmPerformersForm" onaftersave="updateFilm()" class="pull-right">{{film.performers}}</span>
 </p>
 <p class="text-left" style="position:relative;">
     <span class="label label-default" ng-click="filmStudioForm.$show()">{{'Studio'| atLeast:31}}</span><span editable-select="film.studio" onshow="listStudios()" e-ng-options="s.name for s in studios track by s.name" e-form="filmStudioForm"  buttons="no" blur="submit" e-style="position:absolute; right: 0; top:0;" onaftersave="updateFilm()" class="pull-right">{{film.studio.name}}</span>
 </p>
 <p class="text-left" style="position:relative;">
     <span class="label label-default">{{'Format' | atLeast:30}}</span><span class="pull-right">
     <span ng-repeat="mediafile in film.mediaFiles">{{mediafile.format}} ( {{mediafile.storage.name}} )</span>
     </span>
 </p>
 <p class="text-left">
         <span class="label label-default" ng-click="filmCommentForm.$show()">{{'Comment' | atLeast:26}}</span><blockquote class="text-left"><span style="white-space: pre-line;">{{film.comment}}</span></blockquote>
         <span editable-textarea="appendComment" e-rows="5" e-cols="50" onaftersave="updateFilm()" e-form="filmCommentForm" buttons="no" blur="submit" ></span>
 </p>

<div class="container">
    <div class="well my-drop-zone" nv-file-drop="" nv-file-over="" uploader="screenshotImagesUploader">
        drag & drop screenshots here
    </div>
    <div ng-repeat="screenshot in screenshots">
            <div class="col-sm-6 col-md-4"><a href="#" class="thumbnail"><img title="{{$index}}" src="{{screenshotImageBaseUrl + '/' + screenshots[$index]}}" class="img-responsive"></a></div>
    </div>
</div>

<p><div ng-show="showUpdateFilmResult" class="bg-danger">update film fails !</div></p>
 <p><a href="#/"><button type="button" class="btn btn-info btn-block" ng-click="setFocus('Home');">Back</button></a></p>
</div>

<div class="clearfix"></div>
